<template>
    <view class="tip" v-if="show">
        <view class="main">
            <image class="top" src="./images/img_tc.png" mode="" />
            <view class="text">
                下次可以点击这里进入微程序，如果常用可以添加到桌面哦～
            </view>
            <view class="bottom">
                <view
                    @click="cancel()"
                    @touchstart="cancelClick = true"
                    @touchend="cancelClick = false"
                    :class="cancelClick ? 'cn' : ''"
                    class="left"
                    >不再提示</view
                >
                <view
                    @click="confirm()"
                    @touchstart="confirmClick = true"
                    @touchend="confirmClick = false"
                    :class="confirmClick ? 'cn' : ''"
                    class="right"
                    >我知道了</view
                >
            </view>
        </view>
        <view class="close" @click="$emit('close')">
            <image src="./images/btn_close.png" mode="" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            cancelClick: false,
            confirmClick: false
        };
    },
    methods: {
        cancel() {
            this.$emit("cancel");
        },
        confirm() {
            this.$emit("confirm");
        }
    },
    created() {},
    props: {
        show: false
    },
    watch: {
        show(n) {}
    }
};
</script>
<style lang="scss" scoped>
.tip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba($color: #000000, $alpha: 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 99999999999999;
    .main {
        width: 560rpx;
        height: 585rpx;
        background: #ffffff;
        border-radius: 10rpx;
        .top {
            width: 100%;
            height: 311rpx;
        }
        .text {
            padding: 40rpx 48rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #4b4b4b;
            line-height: 42rpx;
        }
        .bottom {
            display: flex;
            align-items: center;
            padding: 32rpx 48rpx;
            .left {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50%;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                line-height: 40rpx;
            }
            .right {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50%;
                font-size: 28rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #4f7dda;
                line-height: 40rpx;
            }
            .cn {
                opacity: 0.3;
            }
        }
    }
    .close {
        margin-top: 78rpx;
        width: 72rpx;
        height: 72rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
